<template>
  <div class="home">
    <el-container class="layout-container-demo" style="height: 100%">
      <el-aside width="230px">
        <el-scrollbar>
          <el-menu
            active-text-color="#E8EAEC"
            background-color="#263238"
            default-active="2"
            text-color="#8a979e"
            :router="true"
            :collapse="flase"
            class="el-menu-vertical-demo"
            @select="handleClose"
          >
            <router-link to="/home/index" style="text-decoration: none"
              ><h3 class="h3">MALL4J建站后台</h3></router-link
            >
            <el-menu-item index="/home/index">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><User /></el-icon>产品管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/product/product"
                  >产品管理</el-menu-item
                >
                <el-menu-item index="/home/product/classify"
                  >分类管理</el-menu-item
                >
                <el-menu-item index="/home/product/divide"
                  >分组管理</el-menu-item
                >
                <el-menu-item index="/home/product/comment"
                  >评论管理</el-menu-item
                >
                <el-menu-item index="/home/product/specifications"
                  >规格管理</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon><Box /></el-icon>门店管理
              </template>

              <el-menu-item-group>
                <el-menu-item index="/home/shop/announcement"
                  >公告管理</el-menu-item
                >
                <el-menu-item index="/home/shop/self">自提点管理</el-menu-item>
                <el-menu-item index="/home/shop/shopping"
                  >运费模板</el-menu-item
                >
                <el-menu-item index="/home/shop/carousel"
                  >轮播图管理</el-menu-item
                >
                <el-menu-item index="/home/shop/hot">热搜管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon><Sugar /></el-icon>会员管理
              </template>

              <el-menu-item-group>
                <el-menu-item index="/home/member">会员管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon><DocumentRemove /></el-icon>订单管理
              </template>

              <el-menu-item-group>
                <el-menu-item index="/home/order">订单管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon><setting /></el-icon>系统管理
              </template>

              <el-menu-item-group>
                <el-menu-item index="/home/system/address"
                  >地址管理</el-menu-item
                >
                <el-menu-item index="/home/system/managers"
                  >管理员列表</el-menu-item
                >
                <el-menu-item index="/home/system/role">角色管理</el-menu-item>
                <el-menu-item index="/home/system/menu">菜单管理</el-menu-item>
                <el-menu-item index="/home/system/cron">定时任务</el-menu-item>
                <el-menu-item index="/home/system/parameter"
                  >参数管理</el-menu-item
                >
                <el-menu-item index="/home/system/systemlog"
                  >系统日志</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 15px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px"
                ><setting
              /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
        <div class="home_tops">
          <el-tabs
            v-model="editableTabsValue"
            class="demo-tabs"
            closable
            @tab-remove="removeTab"
            @tab-click="(pane: TabsPaneContext, ev: Event)=>push_route(pane,ev)"
          >
            <!-- push_route(TabsPaneContext, Event) -->
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
        </div>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import router from "../router/index";
import { useRouter } from "vue-router";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";

let tabIndex = 2;
let strs = "";
const Routes = useRouter();
const routess = router.options.routes[1].children;
const titlename = ref("");
const editableTabsValue = ref("2");
const editableTabs = ref([]);

const del_set = (arr, str) => {
  arr.forEach((item, index) => {
    if (item.path == str) {
      strs = item.name;
      return;
    } else if (item.children != undefined) {
      del_set(item.children, str);
    } else {
      return;
    }
  });
  return "";
};

const push_route = (pane, ev) => {
  let pathname = pane.props.label;
  let path = "";
  editableTabs._rawValue.forEach((item, index) => {
    if (item.title == pathname) {
      path = item.path;
      return;
    }
  });

  Routes.push(path);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key);

  let flag = editableTabs._rawValue.filter((item, index) => {
    return item.path == key;
  });

  if (key != "/home/index" && flag.length == 0) {
    addTab(key);
  } else {
    return;
  }
};

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`;
  del_set(routess, targetName);
  editableTabs.value.push({
    title: strs,
    name: newTabName,
    path: targetName,
  });
  editableTabsValue.value = newTabName;
};
const removeTab = (targetName: string) => {
  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.name;
        }
      }
    });
  }

  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.home_tops {
  margin-top: 1px;
  text-align: left !important;
  width: 100%;
  display: inline-flex;
  height: 40px;
  right: 20px;
  padding-left: 20px;
  background: white;
  box-sizing: border-box;
}
.home {
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo {
  height: 900px;
}

.layout-container-demo .el-header {
  width: 100%;
  height: 50px;
  position: relative;
  background-color: #fff;
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
  margin-top: 5px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.h3 {
  height: 60px;
  line-height: 60px;
  background: rgb(20, 186, 241);
  color: #fff;
  text-align: center;
  font-size: 21px;
}
.tabs {
  width: 110%;
  height: 35px;
  line-height: 35px;
  background: #fff;
  margin-top: 5px;
  margin-left: -17px;
}
</style>